<template>
	<div class="list_edit_tableFunctionWrap">
        <div class="inputList">
            <div class="inputListName verMiddle">
                <span style="color:red;">*</span>
                <span>名称：</span>
            </div>
            <el-input v-model="btnName" placeholder="请输入操作栏按钮的名称" clearable />
        </div>
        <div class="inputFunction">
            <p class="tableBtnTit">
                <span>选择使用功能：</span>
                <a
                    class="addOptionBtn addOptionBtnNo" 
                    @click="radioSelect = ''"
                    href="javascript:void(0);">
                    <span>取消选中</span>
                </a>
            </p>
            <el-radio-group v-model="radioSelect">
                <el-radio  
                    v-for="(item,index) in allBtnArray"
                    :key="index"
                    :label="index"
                    border>{{item}}</el-radio>
            </el-radio-group>
        </div>
	</div>
</template>
<script type="text/javascript">
	
	export default{
		data () {
			return {
                btnName:"",
				radioSelect:"",
				allBtnArray:['跳转页面','打开弹窗'],
                btnItem:{}
			}
		},
		mounted (){

        },
        computed:{
            toggle(){
                let name = this.btnName;
                let radioSelect = this.radioSelect
                return {
                    name,
                    radioSelect
                }
            }
        },
        watch:{
            toggle(){
                var type = '';
                if(this.radioSelect !== ''){
                    type = this.allBtnArray[this.radioSelect];
                }
                this.btnItem = {
                    "name":this.btnName,
                    "type":type
                }
            }
        },
		components : {
			
		},
		methods : {
			resetData(){
                this.btnName = "";
                this.radioSelect = "";
            }
		}
	}
</script>
<style type="text/css" lang="less">
	.list_edit_tableFunctionWrap{
        .inputList{
		    overflow: hidden;
		    margin-bottom: 10px;
            padding-top:20px;
            margin-top:20px;
            border-top:1px solid #E5E6EC;
            .el-input{
                float: left;
                width: 80%;
            }
            .inputListName{
                float: left;
                width:20%;
                line-height:40px;
                text-align: left;
                font-size:14px;
            }
        }
		.tableBtnTit{
            font-size: 14px;
            color:#999;
            margin-bottom:16px;
            .addOptionBtn{
                display:inline-block;
                width:26px;
                height:26px;
                line-height:26px;
                text-align:center;
                border:1px solid #E5E6EC;
                border-radius:100%;
            }
            .addOptionBtnNo{
                width:96px;
                border-radius:0;
                margin-right:5px;
                font-size:12px;
            }
        }
        .inputFunction{
            margin-bottom:10px;
            .el-radio.is-bordered{
                margin-right:10px;
                margin-bottom:10px;
            }
        }
    }
</style>